<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQ 操作元素属性</title>
    <script src="lib/jQuery-v3.6.0.min.js"></script>
  </head>
  <body>
    <a href="https://www.baidu.com" title="百度">百度</a>
    <input type="checkbox" class="my-ck" checked />

    <!-- 自定义属性 -->
    <div data-index="1"></div>

    <script>
      $(function () {
        // 1、设置或获取元素固有属性值
        // 1.1、获取属性值
        // console.log($('a').prop('href'))

        // 1.2、更改属性值
        // $('a').prop('title', '百度一下')

        // 1.3、获取 checkbox 的 checked 属性值
        // $('.my-ck').change(function () {
        //   console.log($(this).prop('checked'))
        // })

        // 2、设置或获取元素自定义属性值
        // 2.1、获取属性值
        // console.log($('div').attr('data-index'))

        // 2.2、更改属性值
        $('div').attr('data-index', 4)
      })
    </script>
  </body>
</html>
